<template>
	<view>
		<view class="nav">
			<uni-nav-bar title="抵扣券核销" left-icon="back" @clickLeft="$tab.back()" :fixed="false" :border="false"
				:status-bar="true" backgroundColor="transparent"></uni-nav-bar>
			<view class="p-32">
				<view class="flex items-center justify-between">
					<view class="">
						<view class="text-48 font-700">
							我的核销
						</view>
						<view class="">
							核对信息，扫码核销~
						</view>
					</view>
					<image src="https://file.jisantour.com/pinggu/profile/wxImages/icon_saoyisao@2x.png"
						class="image-96" mode="" @click="handleScan"></image>
				</view>

				<view class="flex items-center justify-between mt-48" v-if="detail">
					<view class="text-center">
						<view class="text-40 font-700 ">
							{{detail.writedNum}}
						</view>
						<view class="" style="color: #9E9E9E;">
							核销总数
						</view>
					</view>
					<view class="text-center">
						<view class="text-40 font-700 ">
							{{detail.writeAmount}}
						</view>
						<view class="" style="color: #9E9E9E;">
							核销金额
						</view>
					</view>
					<view class="text-center">
						<view class="text-40 font-700 ">
							{{detail.todayWrite}}
						</view>
						<view class="" style="color: #9E9E9E;">
							今日核销
						</view>
					</view>
				</view>

				<view class="mt-24">
					<u-subsection :list="list" :current="current" activeColor="#E36700" inactiveColor="#FFF"
						bgColor="#E36700" @change="sectionChange"></u-subsection>
				</view>
			</view>
		</view>

		<view class="" style="height: 560rpx;">

		</view>

		<view class="px-20 mt-32">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="py-24 px-16 round-16 bg-FFF mb-32 shadow-20" v-for="(item,index) in pageList"
					:key="item.id">
					<view class="text-24 flex align-center justify-between">
						<view class="">
							订单编号：{{item.orderId}}
						</view>
					</view>
					<u-divider></u-divider>
					<div class="flex items-start">
						<image :src="globalConfig.imagePrefix + item.icon" class="image-144" mode=""></image>

						<div class="ml-20">
							{{item.name}}
						</div>
					</div>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'未核销',
					'已核销'
				],
				current: 0,
				detail: null,
				pageList: [],
				globalConfig: getApp().globalData.config
			};
		},
		onLoad() {

		},
		onShow() {
			this.getData()
			this.refresh()
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.pageList = [];
					}

					const res = await this.$Api.index.mallOrderwriteList({
						pageNum: pullScroll.page,
						pageSize: 10,
						writeState: this.current
					})

					this.pageList = this.pageList.concat(res.rows || []);
					if (res.total == 0) {
						pullScroll.empty()
					}

					if (this.pageList.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {
				const res = await this.$Api.index.mallStatistics()
				console.log(res, '统计')
				this.detail = res
			},
			sectionChange(index) {
				this.current = index;
				this.refresh()
			},
			handleScan() {
				// 只允许通过相机扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						this.$tab.nav(`/pages/mine/writeOff/storeOrder/resalt?orderNo=${res.result}`)
					},
					fail: (err) => {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		width: 100%;
		height: 560rpx;
		background: url(https://file.jisantour.com/pinggu/profile/wxImages/hexiao-bg.png) no-repeat;
		background-size: 100% 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
	}
</style>